<template>
  <div class="zss">
    <ul>
      <li
        v-for="item in items"
        :key="item.id"
        :style="[item.name.length > 6 ? styleObject : '']"
      >
        {{ item.name }}
        <duigui :items="item.children" v-if="item.children"></duigui>
      </li>
    </ul>
  </div>
</template>

<script>
import { defineComponent, useAttrs } from "vue";

export default defineComponent({
  name: "RecursiveComponent",
  data: () => {
    return {
      styleObject: {
        color: "red",
        fontSize: "13px",
      },
      styleObject2: {
        color: "yellow",
        fontSize: "13px",
      },
    };
  },
  props: {
    items: {
      type: Array,
      required: true,
    },
    zz: {
      type: String,
    },
  },
  mounted() {
    console.log(this.$attrs);
  },
  setup(props, context) {
    // console.log(context.attrs, "sadas");
    // const attrs = useAttrs();
    // console.log(attrs,'s');
  },
});
</script>
<style scoped></style>
